<script setup>
import { computed, onMounted, ref, watch } from 'vue'
const props = defineProps({
    weatherData: {
        type: Array,
        required: true
    }
})
const setDate = (index, item) => {
    const week = ["日", "一", "二", "三", "四", "五", "六"]
    switch (index) {
        case 0:
            return "今天"
        case 1:
            return "明天"
        default:
            return "星期" + week[item.week]
    }
}
const setWeatherIcon = (weather) => {
    switch (weather) {
        case "晴":
            return "icon-lieri"
        case "阴":
            return "icon-yun"
        case "小雨":
            return "icon-xiaoyu"
        case "大雨":
            return "icon-dayu"
        case "多云":
            return "icon-duoyun"
        case "雾":
            return "icon-wuqi"
        case "雨夹雪":
            return "icon-yujiaxue"
        case "中雪":
            return "icon-zhongxve"
        case "大雪":
            return "icon-daxue"
        default:
            return "icon-feng"

    }
}


const setOptions = (data) => {
    const xData = data.map((item) => item.date.slice(5, 10))
    const dayData = data.map((item) => item.daytemp_float)
    const nightData = data.map((item) => item.nighttemp_float)
    options.value.xAxis.data = xData
    options.value.series[0].data = dayData
    options.value.series[1].data = nightData
}

const options = ref( {
    grid: {

left: 0,
right: 0,
top: 50,
bottom: 0,
},
xAxis: {
type: "category",
show: false,
data: [],
},
yAxis: { show: false },
series: [
{
    data: [],
    type: "line",
    smooth: true, //平滑效果
    label: {
        show: true,
        position: "top",
        color: "#fff",
        formatter: function (params) {
            return "白" + params.value + "℃";
        },
    },
},
{
    data: [],
    type: "line",
    smooth: true,//平滑效果
    label: {
        show: true,
        position: "bottom", //设置标签位置
        color: "#fff", //设置标签字体颜色
        formatter: function (params) {
            return "晚" + params.value + "℃";
        },
    },
},
],
})
watch(() => props.weatherData, (newVal, oldVal) => {
    setOptions(newVal)
    //console.log(111)
}, {deep: true})




</script> 
<template>
    <div class="weather-box">
        <div class="weather-box-header font-white">
            <h2>近期天气</h2>
        </div>
        <div class="weather-box-body font-white">
            <div class="weather-box-body-data">
                <div v-for="(item, index) in weatherData" :key="item.date">
                    <div>{{ setDate(index, item) }}</div>
                    <div>{{ item.date.slice(5, 10) }}</div>
                    <div><i class="iconfont" :class="setWeatherIcon(item.dayweather)"></i> {{ item.dayweather }}</div>
                    <div>风力 {{ item.daypower }}级</div>
                </div>

            </div>
            <div class="weather-box-body-chart">
                <v-chart :option="options" style="width: 100%;height: 150px" />
            </div>
        </div>

    </div>
</template> 


<style lang="scss" scoped>
.weather-box-body {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    width: 100%;
    font-size: 16px;
    padding: 10px;
    background-color: rgb(0, 78, 113);
    border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;

    .weather-box-body-data {
        display: flex;
        justify-content: space-around;
        margin: 10px 20px;

        div {
            text-align: center;
            widows: 100%;

            div {
                margin-top: 15px;
                font-size: 16px;

            }
        }

    }
}

.weather-box {
    margin-top: 20px;
    .weather-box-header {
        margin-bottom: 10px;
    }
}
</style>